<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <th:block th:insert="common/common::head"></th:block>
    <style>
        .pear-container {
            background-color: whitesmoke;
            margin: 10px;
        }

        .layui-body {
            padding: 25px;
        }

        .text-center {
            text-align: center;
        }

        .user-info-head {
            width: 110px;
            height: 110px;
            line-height: 110px;
            position: relative;
            display: inline-block;
            border: 2px solid #eee;
            border-radius: 50%;
            overflow: hidden;
            cursor: pointer;
            margin: 0 auto;
        }

        .layui-line-dash {
            border-bottom: 1px dashed #ccc;
            margin: 15px 0;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">头像展示</div>

            <div class="layui-card-body" style="padding: 25px;">
                <div class="text-center layui-text">
                    <div class="user-info-head" id="userInfoHead">
                    </div>
                    <h2 style="padding-top: 20px;font-size: 20px;" th:text="${user.getNickName()}"></h2>
                </div>
                <div class="layui-text" style="padding-top: 30px;">
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">个人信息</div>
            <div class="layui-card-body">
                <div class="layui-form user-info-form layui-text" style="max-width: 400px;padding-top: 25px;">
                    <div class="layui-form-item">
                        <label class="layui-form-label">邮箱:</label>
                        <div class="layui-input-block">
                            <input type="text" name="email" th:value="${user.getEmail()}" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">账号:</label>
                        <div class="layui-input-block">
                            <input type="text" name="userName" th:value="${user.getUserName()}" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">账户昵称:</label>
                        <div class="layui-input-block">
                            <input type="text" name="nickName" th:value="${user.getNickName()}" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="button" onclick="updateInfo()" value="更新信息"
                                   class="pear-btn pear-btn-success"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">修改密码</div>
            <div class="layui-card-body">
                <form class="layui-form user-info-form layui-text" id="updatePassword"
                      style="max-width: 400px;padding-top: 25px;">
                    <div class="layui-form-item">
                        <label class="layui-form-label">原密码:</label>
                        <div class="layui-input-block">
                            <input type="password" name="password" placeholder="请输入原密码" class="layui-input"
                                   autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">新密码:</label>
                        <div class="layui-input-block">
                            <input type="password" name="newPassword" placeholder="请输入新密码" class="layui-input"
                                   autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">再次输入新密码:</label>
                        <div class="layui-input-block">
                            <input type="password" name="newPasswordAgain" placeholder="请再次输入新密码" class="layui-input"
                                   autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="button" onclick="updatePassword()" value="修改密码"
                                   class="pear-btn pear-btn-warming"/>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript">
    var headImg = [[${headImg}]];
</script>
<script th:replace="common/common::common"></script>
<script>
    var $, tool, request;
    layui.use(['element', 'tool', 'jquery', 'request'], function () {
        var element = layui.element;
        $ = layui.jquery;
        tool = layui.tool;
        request = layui.request;

        var imgKey = '';
        tool.imgsUpload({
            div: $("#userInfoHead"),
            sum: 1,
            fileList: headImg,
            renew: true
        }, function (file) {//添加回调
            if (typeof file === 'object') {
                var formData = new FormData();//初始化一个FormData对象
                formData.append("file", file);//将文件 塞入FormData
                request.upload({
                    url: '/admin/user/api/updateHead',
                    data: formData
                }, function (res) {
                    imgKey = res.data;
                });
            }
        }, function (file) {//删除回调
            var sw = false;
            var key = '';
            if (typeof file === 'string') {
                key = file;
                sw = true;
            } else if (imgKey != null && imgKey !== '') {
                key = imgKey;
                sw = true;
            }
            if (sw)
                request.post({
                    msg: false,
                    load: false,
                    url: '/file/del',
                    data: {
                        fileKey: key
                    }
                });
        });
    })

    function updatePassword() {
        var data = tool.serializeObject($("#updatePassword"));
        if (data.newPassword !== data.newPasswordAgain) {
            tool.pear.fail("两次输入的新密码不相同！");
        } else if (data.newPassword === data.password) {
            tool.pear.fail("新密码与旧密码相同！");
        } else if (data.newPassword == null || data.newPassword === '') {
            tool.pear.fail("请输入新密码！");
        } else {
            request.post({
                url: '/admin/user/api/updatePassword',
                data: data
            });
        }
    }

    function updateInfo() {
        alert("敬请期待");
    }
</script>
</body>
</html>
